<template>
  <div>
    <el-divider content-position="left"> <b>累计数据</b> </el-divider>

    <el-row :gutter="20" style="justify-content: space-between;">

      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie">
                <i class="el-icon-notebook-2 iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands(obj.total_jihuo) }} 次</div>
              <div class=" ">总激活量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie1">
                <i class="el-icon-user iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands(obj.total_zhuce) }} 次</div>
              <div class=" ">总注册量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie2">
                <i class="el-icon-circle-check iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands(obj.total_baomin) }} 次</div>
              <div class=" ">总报名量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie3">
                <i class="el-icon-phone-outline iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands(obj.total_copy) }} 次</div>
              <div class=" ">总复制量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-divider content-position="left"> <b>当日数据</b> </el-divider>

    <el-row :gutter="20" style="justify-content: space-between;">
      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie">
                <i class="el-icon-notebook-2 iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands(obj.today_jihuo) }} 次</div>
              <div class=" ">今日激活量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie1">
                <i class="el-icon-user iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands( obj.today_zhuce) }} 次</div>
              <div class=" ">今日注册量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie2">
                <i class="el-icon-circle-check iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands(obj.today_baomin) }} 次</div>
              <div class=" ">今日报名量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="szie3">
                <i class="el-icon-phone-outline iconss"></i>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="grid-content purple">{{ toThousands( obj.today_copy) }} 次</div>
              <div class=" ">今日复制量</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script lang='ts'>
import { Get, Post } from "@/api";
import { reactive, toRefs } from "vue";
export default {
  name: " ",
  setup() {
    const data = reactive({
      obj: {
        today_baomin: 0,
        today_copy: 0,
        today_jihuo: 0,
        today_zhuce: 0,
        total_baomin: 0,
        total_copy: 0,
        total_jihuo: 0,
        total_zhuce: 0,
      },
    });
    function toThousands(num: any) {
      return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
    }
    const getdata = async () => {
      try {
        const userListResult = await Get({
          url: "/hometongji",
        });
        console.log(userListResult.data);
        data.obj = userListResult.data;
      } catch (error) {}
    };
    getdata();
    return {
      ...toRefs(data),
      toThousands,
    };
  },
};
</script>
<style lang="less" scoped>
.box-card {
  min-width: 300px;
}
.el-card {
  min-width: 300px;
}
.szie {
  text-align: center;
  background: #45a3fc;
  font-size: 50px;
  width: 55px;
}
.szie1 {
  text-align: center;
  background: #9664e1;
  font-size: 50px;
  width: 55px;
}
.szie2 {
  text-align: center;
  background: #27c2c1;
  font-size: 50px;
  width: 55px;
}
.szie3 {
  text-align: center;
  background: #ff9800;
  font-size: 50px;
  width: 55px;
}
.szie4 {
  text-align: center;
  background: #123cf7;
  font-size: 50px;
  width: 55px;
}
.iconss {
  color: white;
}
.grid-content {
  padding: 5px 0;
}
.purple {
  border-bottom: 1px solid #eee;
  font-size: 22px;
  white-space: nowrap; //不换行
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis; //变成...
}
</style>